<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>异常单列表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="exception-table">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <search-form :search="search" :exception-type-list="exceptionTypeList" :person-list="personList">
          </search-form>
        </div>
      </search-btn-view>
      <div class="exception-table-table-div">
        <el-table fit stripe border :data="exceptionList" style="width: 100%" height="parent">
          <el-table-column label="异常类型" prop="typeText" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column label="异常描述" prop="exceptionType" min-width="140px" header-align="center">
          </el-table-column>
          <el-table-column label="提交人" prop="createUser" min-width="100px" header-align="center">
          </el-table-column>
          <el-table-column label="负责人/解决人" prop="solveUser" min-width="100px" header-align="center">
          </el-table-column>
          <el-table-column label="转交人" prop="notifyUserName" min-width="130px" header-align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status===0&&scope.row.notifyUser!==scope.row.solveUserId">
                {{scope.row.notifyUserName}}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="状态" prop="status" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('productMgr.exceptionTable.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="解决方式" prop="solveMethod" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column :resizable="false" label="解决日期" prop="solveTime" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status===1">{{moment(scope.row.solveTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="解决复期" prop="answerDate" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.answerDate!==null">{{moment(scope.row.answerDate).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="转交状态" prop="notifyStatus" width="80px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.isDeliver">{{i18n.getMsg('productMgr.exceptionTable.notifyStatus.'+scope.row.notifyStatus)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="lookDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog title="异常单详情" :visible.sync="openDetail" width="600px" top="10vh">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <exception-detail v-if="openDetail" :exception="selectException"></exception-detail>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/imgUpload.css",
    "./css/searchForm.css",
    "./css/exceptionDetail.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/imgUpload.js"
  ]);

</script>
<script src="./searchForm.js"></script>
<script src="./exceptionDetail.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        typeId: '',
        exceptionType: '',
        solveUser: '',
        createUser: '',
        orderStatus: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        exceptionList: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        personList: [],
        exceptionTypeList: [],
        exceptionTypeObj: {},
        openDetail: false,
        selectException: null
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setPersonList(),
        this.setExceptionTypeList()
      ]).then(function () {
        return self.setExceptionList(true);
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setPersonList: function () {
        var self = this;
        return ajaxRequest('dingTalk/askForApprover').then(function (personList) {
          var persons = [];
          for (var i = 0; i < personList.length; i++) {
            var person = personList[i];
            var id = person.id;
            var obj = {
              value: id,
              label: person.personName
            }
            persons.push(obj);
          }
          self.personList = persons;
          return persons;
        });
      },

      setExceptionTypeList: function () {
        var self = this;
        return ajaxRequest('employeeDailyList/getExceptionType').then(function (exceptionList) {
          var exceptions = [];
          var exceptionTypeObj = {};
          for (var i = 0; i < exceptionList.length; i++) {
            var obj = exceptionList[i];
            var status = obj.status;
            if (status === 1) {
              exceptions.push({
                value: obj.id,
                label: obj.exceptionType,
                status: obj.status
              });
            }
            exceptionTypeObj[obj.id] = obj.exceptionType;
          }
          self.exceptionTypeObj = exceptionTypeObj;
          self.exceptionTypeList = exceptions;
          return exceptions;
        });
      },

      setExceptionList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        this.setPostData(postData);

        this.loading = true;
        var self = this;
        return ajaxRequest('employeeDailyList/getExceptionDeclare', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var exceptionList = res.returnData;
          var exceptionTypeObj = self.exceptionTypeObj;
          var imgFields = ['img1', 'img2', 'img3', 'img4'];
          for (var i = 0; i < exceptionList.length; i++) {
            var exception = exceptionList[i];
            var typeId = exception.typeId;
            exception.typeText = exceptionTypeObj[typeId];

            var isDeliver;
            if (exception.status === 1) {
              isDeliver = false;
            } else {
              isDeliver = exception.notifyUser !== exception.solveUserId || exception.notifyStatus !== 0;
            }
            exception.isDeliver = isDeliver;

            var imgUrls = [];
            for (var j = 0; j < imgFields.length; j++) {
              var imgField = imgFields[j];
              var imgUrl = exception[imgField];
              if (!SysUtil.isEmpty(imgUrl)) {
                imgUrls.push(imgUrl);
              }
            }
            exception.imgUrls = imgUrls;
          }

          self.exceptionList = exceptionList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
          return exceptionList;
        }).catch(function () {
          self.loading = false;
          return [];
        });
      },

      setPostData: function (postData) {
        var search = this.search;
        var fields = ['typeId', 'exceptionType', 'solveUser', 'createUser'];
        SysUtil.setPostData(postData, search, fields);

        var orderStatus = search.orderStatus;
        switch (orderStatus) {
          case 0:
            postData.status = 0;
            break;
          case 1:
            postData.status = 0;
            postData.type = 5;
            postData.notifyStatus = 0;
            break;
          case 2:
            postData.status = 0;
            postData.type = 4;
            postData.notifyStatus = 0;
            break;
          case 3:
            postData.status = 0;
            postData.notifyStatus = 1;
            break;
          case 4:
            postData.status = 0;
            postData.notifyStatus = 2;
            break;
          case 5:
            postData.status = 1;
            break;
        }
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setExceptionList(true);
      },

      pageChange: function () {
        this.setExceptionList();
      },

      lookDetail: function (exception) {
        this.selectException = exception;
        this.openDetail = true;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      ExceptionDetail: ExceptionDetail
    }
  });

</script>

<style>
  .exception-table {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .exception-table .exception-table-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
